<template>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li>
          <a href="javascript:;" @click="isShow(0)" class="active">精选</a>
        </li>
        <li><a href="javascript:;" @click="isShow(1)">美食</a></li>
        <li><a href="javascript:;" @click="isShow(2)">百货</a></li>
        <li><a href="javascript:;" @click="isShow(3)">个护</a></li>
        <li><a href="javascript:;" @click="isShow(4)">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./assets/tab/tab00.png" alt="" /></div>
      <div class="item"><img src="./assets/tab/tab01.png" alt="" /></div>
      <div class="item"><img src="./assets/tab/tab02.png" alt="" /></div>
      <div class="item"><img src="./assets/tab/tab03.png" alt="" /></div>
      <div class="item"><img src="./assets/tab/tab04.png" alt="" /></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    isShow(num) {
      document.querySelectorAll(".active").forEach((item) => {
        item.classList.remove("active");
      });
      Array.from(document.querySelectorAll(".item"))[num].classList.add(
        "active"
      );
      Array.from(document.querySelectorAll("a"))[num].classList.add("active");
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.tab {
  width: 590px;
  height: 340px;
  margin: 20px;
  border: 1px solid #e4e4e4;
}

.tab-nav {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.tab-nav h3 {
  font-size: 24px;
  font-weight: normal;
  margin-left: 20px;
}

.tab-nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
}

.tab-nav ul li {
  margin: 0 20px;
  font-size: 14px;
}

.tab-nav ul li a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  color: #333;
}

.tab-nav ul li a.active {
  border-color: #e1251b;
  color: #e1251b;
}

.tab-content {
  padding: 0 16px;
}

.tab-content .item {
  display: none;
}

.tab-content .item.active {
  display: block;
}

.item:nth-child(2) {
}
</style>